<template>
	<view>
		<view class="margin-sm" style="padding-bottom: 140rpx;">
			<view class="maoboli radius  margin-top-sm padding-sm">
				<!-- 门店 -->
				<view class="font-title ">
					当前门店 :金牛凯德店
					<view class="iconfont icon-right"></view>
				</view>
				<!-- 选择日期 -->
				<view class="container margin-top-sm">
					<view v-for="(item,index) in dataList" @click="selectDate(index)">
						<view
							:class="{'view-item radius font-content padding-sm':true,'bg-pink font-title':from.dateIndex==index}">
							<view class="juzhong ">{{item.dateShow}}</view>
							<view class="font-11  juzhong ">{{item.weekDay}}</view>
						</view>
					</view>
				</view>
				<!-- 选择时间 -->
				<view class="container margin-top-sm">
					<view v-for="(item,index) in timeH" @click="selectTime(index)">
						<view
							:class="{'view-item radius font-content padding-sm':true,'bg-pink font-title':from.timeIndex==index}">
							<view class="juzhong">{{item.h}}小时</view>
						</view>
					</view>
					<view :class="{'view-item radius juzhong padding-sm':true,'bg-pink':from.timeIndex==99}"
						@click="selectTime(99)">
						<input placeholder="自定义" type="number" style="font-size: 14px;" />
					</view>
				</view>
			</view>
			<!-- 公告 -->
			<view class="radius margin-top-sm">
				<view>
					<uni-notice-bar single show-icon text="营业时间24小时"></uni-notice-bar>
				</view>
			</view>
			<!-- 房间列表 -->
			<view v-for="item in list">
				<roomMJ :data="item" @select="openyuyue" @showImg="previewImage"></roomMJ>
			</view>
			<guaguaLxianxi></guaguaLxianxi>
		</view>
		<!-- <Tabbar :pageIndex="1"></Tabbar> -->
		<yuyue ref="yuyueRef"></yuyue>
	</view>
</template>

<script>
	import {
		generateDateList
	} from "@/utils/validate.js"
	export default {
		data() {
			return {
				dataList: [],


				from: {
					date: null,
					dateIndex: 0,
					timeIndex: 0,
				},
				timeH: [{
						h: 4
					},
					{
						h: 5
					},
					{
						h: 3
					},
					{
						h: 6
					},
					{
						h: 7
					},
				],
				list: [{
					date: "2024-09-07",
					title: "雨林8号大包厢",
					describe: "距您222米距您222米距您222米距您222米距您222米距您222米",
					tag: ['WiFi', '水', '空调', '零食', '筹码', '窗户'],
					imgList: ['/static/images/未上传门店照片.png', '/static/images/未上传门店照片.png'],
					timeNode: [1, 2, 3, 4],
					priceInfo: [{
							hour: 1,
							price: 15
						},
						{
							hour: 4,
							price: 50
						},
						{
							hour: 5,
							price: 60
						},
					],
				}, {
					date: "2024-09-08",
					title: "雨林8号大包厢",
					describe: "距您222米距您222米距您222米距您222米距您222米距您222米",
					tag: ['WiFi', '水', '空调', '零食', '筹码', '窗户'],
					imgList: ['/static/images/未上传门店照片.png', '/static/images/未上传门店照片.png'],
					timeNode: [12, 13, 14, 15],
					priceInfo: [{
							hour: 1,
							price: 15
						},
						{
							hour: 4,
							price: 50
						},
						{
							hour: 5,
							price: 60
						}, {
							hour: 5,
							price: 60
						}, {
							hour: 5,
							price: 60
						}, {
							hour: 5,
							price: 60
						},
					],
				}, {
					date: "2024-09-07",
					title: "雨林8号大包厢",
					describe: "距您222米距您222米距您222米距您222米距您222米距您222米",
					tag: ['WiFi', '水', '空调', '零食', '筹码', '窗户'],
					priceInfo: [{
							hour: 1,
							price: 15
						},
						{
							hour: 4,
							price: 50
						},
						{
							hour: 5,
							price: 60
						},
					],
					imgList: ['/static/images/未上传门店照片.png', '/static/images/未上传门店照片.png'],
					timeNode: [6, 7, 8, 9]
				}, {
					date: "2024-09-07",
					title: "雨林8号大包厢",
					describe: "距您222米距您222米距您222米距您222米距您222米距您222米",
					tag: ['WiFi', '水', '空调', '零食', '筹码', '窗户'],
					priceInfo: [{
							hour: 1,
							price: 15
						},
						{
							hour: 4,
							price: 50
						},
						{
							hour: 5,
							price: 60
						},
					],
					imgList: ['/static/images/未上传门店照片.png', '/static/images/未上传门店照片.png'],
					timeNode: [6, 7, 8, 9]
				}, {
					date: "2024-09-09",
					title: "雨林8号大包厢",
					describe: "距您222米距您222米距您222米距您222米距您222米距您222米",
					tag: ['WiFi', '水', '空调', '零食', '筹码', '窗户'],
					priceInfo: [{
							hour: 1,
							price: 15
						},
						{
							hour: 4,
							price: 50
						},
						{
							hour: 5,
							price: 60
						},
					],
					imgList: ['/static/images/未上传门店照片.png', '/static/images/未上传门店照片.png'],
					timeNode: [6, 7, 8, 9]
				}, {
					date: "2024-09-09",
					title: "雨林8号大包厢",
					describe: "距您222米距您222米距您222米距您222米距您222米距您222米",
					tag: ['WiFi', '水', '空调', '零食', '筹码', '窗户'],
					priceInfo: [{
							hour: 1,
							price: 15
						},
						{
							hour: 4,
							price: 50
						},
						{
							hour: 5,
							price: 60
						},
					],
					imgList: ['/static/images/未上传门店照片.png', '/static/images/未上传门店照片.png'],
					timeNode: [6, 7, 8, 9]
				}]
			}
		},
		created() {
			this.dataList = generateDateList()
			this.from.date = this.dataList[this.from.dateIndex].date
		},
		methods: {
			init() {

			},
			openyuyue(data) {
				// let data2 = Object.assign({}, this.from, data);
				// data2.date = this.dataList[this.from.dateIndex].date
				if (this.from.timeIndex != null) {
					data.hourNumber = this.timeH[this.from.timeIndex].h
				}

				this.$refs.yuyueRef.open(data)
			},
			selectDate(i) {
				this.from.dateIndex = i

			},
			selectTime(i) {
				this.from.timeIndex = i
			},
			previewImage(imgList) {
				// 使用uni.previewImage进行图片预览
				console.log(imgList);
				uni.previewImage({
					current: imgList[0], // 当前显示的图片链接
					urls: imgList, // 需要预览的图片链接列表
					indicator: 'number'
				});
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		overflow-x: auto;
		/* 当内容超出容器宽度时，允许水平滚动 */
		white-space: nowrap;
		/* 防止内容换行 */
	}

	.div-item {
		display: inline-block;
		/* 使 div 元素并排显示 */
		margin-right: 10px;
		/* 添加一些间隔 */
	}

	.container {
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: thin;
		/* 设置滚动条的宽度 */
		scrollbar-color: $uni-color-primary lightblue;
		/* 设置滚动条的轨道和滑块颜色 */
	}

	/* Webkit 浏览器特定的样式 */
	.container::-webkit-scrollbar {
		width: 8px;
		/* 设置滚动条的宽度 */
	}

	.container::-webkit-scrollbar-track {
		background: lightblue;
		/* 设置滚动条轨道的颜色 */
	}

	.container::-webkit-scrollbar-thumb {
		background-color: $uni-color-primary;
		/* 设置滚动条滑块的颜色 */
		border-radius: 4px;
		/* 设置滚动条滑块的圆角 */
	}
</style>